const { resolve } = require('path'); //node内置核心模块，用来设置路径。
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js', // 入口文件配置（精简写法）
    /*完整写法：
        entry:{
            main:'./src/js/app.js'
        }
        */
    output: { //输出配置
        // filename: './js/app.js',//输出文件名
        path: resolve(__dirname, 'build'),//输出文件路径(绝对路径)
        filename: 'static/mian.js',
        clean: true,    // 删除 path 指定的文件夹后再打包
        // assetModuleFilename: 'images/[hash:10][ext][query]' // 指定图片打包位置
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader', //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'sass-loader' //将less文件编译成css文件
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader', //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                ]
            },
            {
                test: /\.(png|jpe?g|gif)/,
                type: 'asset',  //  将会根据 parser/dataUrlCondition 设置的 maxSize 以下的大小进行打包
                parser: {
                    dataUrlCondition: {
                        // 设置编译的最大文件大小
                        maxSize: 4 * 1024 // 4kb
                    }
                },
                generator: {
                    filename: 'image/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'ttfs/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(map[34]|avi)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,  //  排除 node_modules 文件夹
                use: {
                    loader: 'babel-loader',
                    /* options: {
                        presets: ['@babel/preset-env']
                    } */
                }
            }
        ]
    },
    plugins: [
        new ESLintPlugin({
            context: resolve(__dirname, 'src')
        }),
        new HtmlWebpackPlugin({
            // 保持原来的代码 并自动引入打包后文件路径
            template: resolve(__dirname, 'index.html')
        })
    ],
    resolveLoader: {
        modules: [
            resolve(__dirname, "node_modules"),
            resolve(__dirname, "loaders"),
        ],
    },
    devServer: {
        port: 9527,
        host: 'localhost',
        open: false
    },
    mode: 'development'   //开发环境(二选一)
    //mode: 'production'   //生产环境(二选一)
};